<template>
  <!-- <div class="home">Hello, {{ echartStore.storeEchartData.salesToday }}</div>
   -->
  <!-- <el-row :gutter="20">
    <el-col :span="6"></el-col>
    <el-col :span="6"></el-col>
    <el-col :span="6"></el-col>
    <el-col :span="6"></el-col>
  </el-row> -->
  <div class="home">
    <TopView></TopView>
    <MiddleView class="mt-20"></MiddleView>
    <ButtomView class="mt-20"></ButtomView>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Home'
}
</script>
<script lang="ts" setup>
// import { useUserInfoStore } from '@/stores/userInfo'
// 导入vue
import TopView from './components/Topview/index.vue'
import MiddleView from './components/MiddleView/index.vue'
import ButtomView from './components/ButtonView/index.vue'

import { onMounted } from 'vue'
// 导入store仓库并获取到实例
import useEchartStore from '@/stores/echart'
// const userInfoStore = useUserInfoStore()

// 获取到仓库实例
const echartStore = useEchartStore()

onMounted(() => {
  // 在仓库中调用actions方法
  echartStore.getEchartdata()
})
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  padding: 20px;
  /* font-size: 30px; */
  background-color: #ddd;
}
</style>
